<script setup>
//课程上传页面
    import {
    Plus,
    Delete,
    Edit,
    Message,
    Search,
    Star,
    } from '@element-plus/icons-vue'

    import { ref } from 'vue';
    const questionCategory = ref();
    const questionDifficulty = ref();
    const knowledgePoint = ref();
    const category = ref([
        {id:'01', name:'语文', categoryState:'未开课', courseTime:'2022-01-01 13:00:00'},
        {id:'02', name:'数学', categoryState:'进行中', courseTime:'2022-01-02 13:00:00'},
        {id:'03', name:'英语', categoryState:'已结束', courseTime:'2022-01-03 13:00:00'}
    ])
    const addDialogVisible = ref(false);
    const nameSearch = ref();

    const classModel=ref({
        id:'',
        name:'',
        categoryState:'',
        courseTime:''
    })

    const showAddDialog = (row)=>{
        addDialogVisible.value = true;
        classModel.value.id = row.id;
        classModel.value.name = row.name;
        classModel.value.categoryState = row.categoryState;
        classModel.value.courseTime = row.courseTime;
        console.log(classModel.value);
    }
    const addClass =()=>{
        category.value.push({...classModel.value})
        addDialogVisible.value = false;
        console.log(category.value);
    }

</script>
<template>
    <el-card class="page-container">
        <div style="display: flex;justify-content: space-between;">
            <div>
                <el-button type="primary" :icon="Plus" @click="showAddDialog">添加</el-button>
                <el-select v-model="questionCategory" placeholder="题目类别" style="width: 115px">
                    <el-option label="语文" value="1" />
                    <el-option label="数学" value="2" />
                    <el-option label="英语" value="3" />
                </el-select>
                <el-select v-model="questionDifficulty" placeholder="题目难度" style="width: 115px">
                    <el-option label="低" value="1" />
                    <el-option label="中" value="2" />
                    <el-option label="难" value="3" />
                </el-select>
                <el-select v-model="knowledgePoint" placeholder="知识点" style="width: 115px">
                    <el-option label="进行中" value="1" />
                    <el-option label="未开课" value="2" />
                    <el-option label="已结束" value="3" />
                </el-select>
            </div>
            <div>
                <el-input v-model="nameSearch" placeholder="请输入目录名称" style="width: 120px;"></el-input>
                <el-button type="primary" width="100%" :icon="Search">搜索</el-button>
            </div>   
        </div>
        <div class="example-pagination-block" >
            <div class="example-demonstration" >
                <el-table style="width: 100%;"  :data="category">
                    <el-table-column label="序号" width="100%" type="index" prop="id"></el-table-column>
                    <el-table-column label="目录名称"  prop="name"></el-table-column>
                    <el-table-column label="开课状态"  prop="categoryState">
                        <template #default="scope">
                            <span :style="{ color: scope.row.categoryState === '进行中' ? 'red' : scope.row.categoryState === '未开课' ? 'blue' : 'gray' }">
                            {{ scope.row.categoryState }}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column label="开课时间"  prop="courseTime"></el-table-column>
                    <el-table-column label="操作" width="100%">
                        <template #default="{row}">
                            <el-button :icon="Edit" type="primary" circle plain @click="showAddDialog(row)"></el-button>
                            <el-button :icon="Search" type="success" circle plain ></el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <el-dialog v-model="addDialogVisible" title="添加信息" width="30%">
                    <el-form :model="classModel" :rules="rules" label-width="100px" style="padding-right: 40px;">
                        <el-form-item label="序号" prop="id">
                            <el-input minlength="1" maxlength="10" v-model="classModel.id"></el-input>
                        </el-form-item>
                        <el-form-item label="目录名称" prop="name">
                            <el-input minlength="1" maxlength="10" v-model="classModel.name"></el-input>
                        </el-form-item>
                        <el-form-item label="开课状态" prop="categoryState">
                            <el-select v-model="classModel.categoryState" placeholder="请选择开课状态" style="width: 100%">
                                <el-option label="未开课" value="未开课" />
                                <el-option label="进行中" value="进行中" />
                                <el-option label="已结束" value="已结束" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="开课时间" prop="courseTime">
                            <el-date-picker v-model="classModel.courseTime" type="datetime" placeholder="选择日期时间"></el-date-picker>
                        </el-form-item>
                    </el-form>
                    <template #footer>
                        <span>
                            <el-button @click="addDialogVisible = false">取消</el-button>
                            <el-button @click="addClass">确认</el-button>
                        </span>
                    </template>
                </el-dialog>

            </div>
            <el-pagination background layout="prev, pager, next" :total="1000" style="display: flex;justify-content: space-between;align-items: center; position: bottom;margin-top: 10px;" />
        </div>
    </el-card>
</template>
<style scoped lang="scss">
    .page-container{
        min-height: 100%;
        box-sizing: border-box;
    }
</style>
